<template>
    <div class="miste">
        <Header class="header">
            <div slot="left">
                <div class="iconfont icon-icon-search" @click='goSearch'></div>
            </div>
            <div slot="middle">
                <div> {{address.name?address.name:'正在定位...'}}</div>
            </div>
            <div slot="right">
                <div @click='go'>登录/注册</div>
            </div>
        </Header>
        <Scroll ref="scroll" class="content">
            <Swiper :category='category'></Swiper>
            <ShopTitle></ShopTitle>
            <ShopItem :shops='shops'></ShopItem>
        </Scroll>
        
    </div>
</template>

<script>
import Swiper from 'components/common/Swiper/Swiper'
import Header from 'components/common/HeaderGuide/Header'
import ShopTitle from './Child/ShopTitle'
import ShopItem from 'components/comment/ShopItem/index'
import Scroll from 'components/common/Scroll/Scroll'

import {debounce} from 'components/common/untils'

import {mapState} from 'vuex'
export default {
    data () {
        return {
        }
    },
    components:{
        Header,
        Swiper,
        ShopTitle,
        ShopItem,
        Scroll
    },
    computed:{
        //通过mapstate将store中的state映射到计算属性
        ...mapState({
            // ['category','address','shops'],两种写法
            // 多模块写法
            category:state=>state.miste.category,
            address:state=>state.miste.address,
            shops:state=>state.miste.shops
        })
            

    },
    created() {
         this.$store.dispatch('getAddress')
         this.$store.dispatch('getcategorys')
         this.$store.dispatch('getShops')
    },
    mounted () {
        const refresh = debounce(this.$refs.scroll.refresh,200)
        this.$bus.$on('imageLoad',()=>{
            refresh()
         })
    },
    methods: {
        go(){
            this.$router.push('/login')
        },
        goSearch(){
            this.$router.push('/search')
        }
    }
};
</script>

<style  scoped>
.miste{
    height: 100vh;
}
.iconfont{
    margin-left: -18px;
}
.content{
    height: calc(100% - 44px - 49px);
    overflow: hidden;
}

</style>

